<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets">
   <body>
      <ui:composition>
        <div style="display: inline-block; width:#{imageSize}px; height:#{imageSize}px; padding:1px;">
            <div style="position: absolute;">
                <a title="#{playerDAO.getPlayerById(playerId).name}>" href="player.xhtml?player=#{playerDAO.getPlayerById(playerId).name}">
                    <img width="#{imageSize}" height="#{imageSize}" src="images/#{playerDAO.getPlayerById(playerId).name}_image.png" alt="#{playerDAO.getPlayerById(playerId).name}"/>
                </a>
                <span style="position:absolute; width:#{imageSize}px; height:#{imageSize}px; top:0; left: 0; z-index: 1;">
                    <a title="#{playerDAO.getPlayerById(playerId).name}" href="player.xhtml?player=#{playerDAO.getPlayerById(playerId).name}">
                        <img width="#{imageSize}" height="#{imageSize}" src="images/Transparent.png" alt="Transparent.png" />
                    </a>
                </span>
            </div>
            <div style="display: table; height: #{imageSize}px; position: absolute; overflow: hidden; line-height: normal;">
                <div style="position: relative; display: table-cell; vertical-align: bottom;">
                    <div style="position: relative; top: -50%; text-align: center; width: #{imageSize}px; font-size: 11px; font-weight: regular; color: white; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black;">
                        #{playerDAO.getPlayerById(playerId).screenName}
                    </div>
                </div>
            </div>
        </div>
    </ui:composition>
   </body>
</html>